<template>
<el-container>
  <el-header style="height: auto;">
    <el-row type="flex" justify="end" align="top">
      <el-col class="add" :xl="{ span: 5 }">
        <el-button type="primary" size="small" @click="toEdit(equipment)">增加设备</el-button>
      </el-col>
    </el-row>
    <el-row class="hr">
      <el-col :span="24">
        <hr style="height:1px;border:none;border-top:1px solid #dcdfe6;margin-top: 28px;">
      </el-col>
    </el-row>
    <el-form :model="form" :rules="formRules">
      <el-row>
        <el-col class="box" :xl="{ span: 8 }" :lg="{ span: 8 }" :xs="{ span: 24 }">
          <el-form-item label="设备编号" label-width="90px" prop="equipmentNumberSearch">
            <el-input size="small" v-model="form.equipmentNumberSearch" style="width: 96%;">
              <el-button slot="append" icon="el-icon-search" size="small" @click="initData"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-header>
  <el-main>
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" @sort-change="sortChange" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" ref="singleTable">
      <el-table-column prop="id" type="selection" align="center"></el-table-column>
      <el-table-column prop="equipmentNumber" label="设备编号" sortable="custom" align="center"></el-table-column>
      <el-table-column prop="dictEquipmentType" label="设备类型" sortable="custom" align="center"></el-table-column>
      <el-table-column prop="dictIsBindingName" label="是否绑定卡" align="center"></el-table-column>
      <el-table-column prop="area" label="所属区域" align="center"></el-table-column>
      <el-table-column prop="cardNumber" label="绑定卡业务号码" align="center"></el-table-column>
      <el-table-column prop="dictCardBodyTypeName" label="卡体类型" align="center"></el-table-column>
      <el-table-column prop="currentMonthFlow" label="本月已用(MB)" align="center"></el-table-column>
      <el-table-column prop="allFlow" label="累计已用(MB)" align="center"></el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
            <el-dropdown-menu slot="dropdown">
              <el-button class="operation" @click="toEdit(scope.row)">设备查看</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="block"><span class="demonstration">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :page-count="maxPage" :hide-on-single-page="value" background></el-pagination></span></div>
  </el-main>
</el-container>
</template>

<script>
import { getEquipmentList} from '@/api/getData'
// import { getEquipmentList,selectPoolName } from '@/api/getData'

export default {
  name: 'Equipment',
  data() {
    const validateEquipmentNumberSearch = (rule, value, callback) => {
      if (value.length > 32) {
        callback(new Error('设备编号不能超过32位'))
      } else {
        callback()
      }
    }
    const validateAreaSearch = (rule, value, callback) => {
      if (value.length > 100) {
        callback(new Error('所属区域不能超过100位'))
      } else {
        callback()
      }
    }
    // 全局绑定变量
    return {
      formRules: {
        equipmentNumberSearch: [
          { message: '请填写设备编号', trigger: 'blur' },
          { validator: validateEquipmentNumberSearch }
        ],
        areaSearch: [
          { message: '请填写所属区域', trigger: 'blur' },
          { validator: validateAreaSearch }
        ]
      },
      // 设备编号
      equipmentNumberSearch: '',
      // 设备类型
      dictEquipmentTypeSearch: '',
      // 是否绑定卡
      dictIsBindingSearch: '',
      dictIsBindingSelect: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: 'C_YES',
          label: '已绑定'
        },
        {
          value: 'C_NO',
          label: '未绑定'
        }
      ],

      value: false,
      form: {
        region: '',
        equipmentNumberSearch: '',
        areaSearch: ''
      },
      pageSize: 10,
      currentPage: 1,
      ascs: [],
      descs: [],
      maxPage: 1,
      account: {
        name: ''
      },

      tableData: [],
      multipleSelection: [],
      searchLoading: false
    }
  },
  created() {
    this.initData()
    // this.initPoolSelect()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
    toEdit(equipment) {
      if (equipment != undefined) {
        this.$router.push({ path: '/equipment/edit/' + equipment.id })
      } else {
        this.$router.push({ path: '/equipment/edit/' + 0 })
      }
    },
    clearForm() {
      this.equipmentNumberSearch = null
      this.dictEquipmentTypeSearch = null
      this.dictIsBindingSearch = null
      this.areaSearch = null
      // this.operatorSearch = null
      // this.flowPoolSearch = null
      // this.mealSearch = null
    },

    // 初始化二级流量池列表
    // async initPoolSelect(theKey) {
    //   const returnData = await selectPoolName({
    //
    //   })
    //   this.flowPoolSelect = []
    //   if (returnData._result) {
    //     returnData.data.records.map(item => {
    //       const obj = {}
    //       obj.id = item.id
    //       obj.flowPoolName = item.flowPoolName
    //       this.flowPoolSelect.push(obj)
    //     })
    //   }
    // },

    // 页面初始化
    async initData() {
      const returnData = await getEquipmentList({
        dictEquipmentType: this.form.dictEquipmentTypeSearch,
        dictIsBinding: this.dictIsBindingSearch,
        area: this.form.areaSearch,
        // operatorSearch: this.operatorSearch,
        // flowPool: this.flowPoolSearch,
        // meal: this.mealSearch,
        // account: this.account.name,
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      },
      {
        obj: this,
        key: 'tableLoading;'
      })
      this.tableData = []
      if (returnData._result) {
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.equipmentNumber = item.equipmentNumber
          obj.dictEquipmentType = item.dictEquipmentType
          obj.dictIsBindingName = item.dictIsBindingName
          obj.cardNumber = item.cardNumber
          obj.dictCardBodyTypeName = item.dictCardBodyTypeName
          obj.area = item.area
          obj.currentMonthFlow = item.currentMonthFlow
          obj.allFlow = item.allFlow
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 20px;
      .add {
        display: flex;
        flex-direction: row-reverse;
      }

      .right {
        display: flex;
        flex-direction: row-reverse;
      }

      .hr {
        margin: 8px auto;
      }

      .box {
        position: relative;
        top: -2px;
      }

      .box  {
        .el-form-item /deep/ label {
          text-align: left;
        }
      }
      .el-form-item {
        margin-bottom: 20px;
      }
      .transition {
        transition: 0.5s;
      }
    }

    .el-main {
      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }

      .block {
        float: right;
      }
    }
  }
  .el-popper[x-placement^=bottom] {
    margin-right: -39px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -39px;
    button {
      display: block;
    }
    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .accountView {
    .el-dialog__body {
      .el-form-item /deep/ input {
        border: 0;
        cursor: default;
      }
    }
  }
  .resetPassword /deep/ .el-dialog__body {
    text-align: center;
    font-size: 14px;
    font-family: 微软雅黑;
    line-height: 40px;
    color: #606266;
    font-weight: 700;
  }
  .deactivate /deep/ .el-dialog__body {
    text-align: justify;
    font-size: 14px;
    font-family: 微软雅黑;
    line-height: 40px;
    color: #606266;
    font-weight: 700;
  }
  .cardDetail {
    .el-dialog__body {
      .el-form-item /deep/ input {
        border: 0;
        cursor: default;
      }
    }
  }
  .cardDetail /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    height: 80%;
    .el-dialog__body {
      overflow: auto;
    }
  }
</style>
